<extend name="Common:base"/>
<block name="head">
	
</block>
<block name="body">
  <div id="app" class="container">
  	<div v-show="show" class="wrapp" style="display:none">
  		<!-- table -->
  		<el-row>
     <el-col :span="24">
      <el-table 
      :data="dataList" 
      v-loading="dataLoad" 
      element-loading-text="{:L('DATA_LOGIN')}"  
      :row-class-name="tableRowClassName">
        <el-table-column align="center" type="index" label="{:L('INDEX')}" width="100">
        </el-table-column>
        <el-table-column align="center" label="{:L('FIELD_ClFIC')}" prop="classfication">
        </el-table-column>
        <el-table-column align="center" label="{:L('FIELD_NAME')}" prop="title">
        </el-table-column>
        <el-table-column align="center" label="{:L('FIELD_REMARK')}" prop="remark">
        </el-table-column>
        <el-table-column inline-template align="center" label="{:L('FIELD_STATUS')}">
          <el-switch 
          	v-model="row.switch" 
          	on-color="#13ce66" 
          	off-color="#ff4949" 
          	@change="switchHandle($index, row)">
          </el-switch>
        </el-table-column>
        
        <el-table-column inline-template align="center" label="操作">
         <div>
         	<el-button
	          size="small"
	          @click="handleEdit($index, row)">
	          {:L('EDIT')}
	        </el-button>
         	<el-button
	          size="small"
	          type="danger"
	          @click="handleDelete($index, row)">
	          {:L('DELETE')}
	        </el-button>
         </div>
        </el-table-column>
      </el-table>
     </el-col>
  	 </el-row>
  	 <!-- table -->
  		<!-- toolbar -->
  		<el-row type="type" justify="space-around" align="middle" class="row-bg">
  		 <el-col :span="12">
       <div class="grid-content bg-purple">
       	 <span class="wrapper">
       	 	<el-tooltip content="{:L('ADD_NEW')}" placement="right">
	       	 	<el-button size="small"  @click="openDialog('add')" icon="plus" type="primary">{:L('ADD')}</el-button>
	       	</el-tooltip>
       	 </span>
       </div>
  		 </el-col>
  		 <el-col :span="12">
  		  <!-- page -->
  		  <div class="grid-content bg-purple-light pull-right" style="display: none;">
  		  	  <include file="Common:_pagination"/>
  		  </div>
  		   <!-- page -->
  		 </el-col>
  	 </el-row>
  		<!-- toolbar -->
  	</div>
  	<div v-show="show" style="display:none">
  		<!-- 添加 -->
  		<include file="_add" />
  		<!-- 修改 -->
  		<include file="_edit" />
  		
  	</div>
  </div>
</block>
<block name="scripts">
<script>
	window.defaultOption.setDatas({
		levelOne:[{id:"1", name:"顶级节点"}],
		searchForm:{}
	}).setForm('add', {
		pid:'',
		name:"",
		title:"",
		remark:"",
		status:'1',
		level:2,
		sort:0
	}).setForm('edit', {
		id:'',
		pid:'',
		name:"",
		title:"",
		remark:"",
		status:'1',
		sort:0
	}).setForm('status',{
			id:0,
			status:0
	}).setMethod('beforeList', function(dataList){
		var vmThis = this;
		vmThis.levelOne = [{id:"1", name:"顶级节点"}];
		dataList.forEach(function(currentValue, index){
			currentValue['switch'] = currentValue.status == 1 ? true: false;

			if (currentValue.level == 2) {
				currentValue['classfication'] = currentValue.title;
				vmThis.levelOne.push({id: currentValue.id, name:currentValue.title});
			} else {
				currentValue['classfication'] =  "";
			}
		});
		return dataList;
	}).setMethod('switchHandle', function(index, row){
		row.status = row.switch ? '1' : '0'; 
		this.initObject(this.statusForm, row);
		this.statusIndex = index;
		var  vmThis = this;
		
		//暂时这样了 这里强耦合
		this.$http.post(page.editFormUrl, this.statusForm).catch(function(response){
			vmThis.$message({
			  message: '状态更改失败',
			  type: 'error'
			});
			vmThis.dataList[vmThis.statusIndex].switch = ! vmThis.dataList[vmThis.statusIndex].switch ;

		});
	}).setMethod('addFormSelect', function(value){
		if (value==1) {
			this.addForm.level = 2;
		} else {
			this.addForm.level = 3;
		}
	}).setMethod('tableRowClassName', function(row, index){
		if (row.level==2) {
          return 'positive-row';
        } else {
          return '';
        }
	})
</script>
</block>